<script setup>
import { ref } from 'vue'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取右侧胶囊位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
</script>

<template>
  <view class="sign-in">
    <view class="top" :style="{ paddingTop: menuButtonInfo.top + 'px' }">
      <navigator open-type="navigateBack" hover-class="none">
        <view
          class="back-icon"
          :style="{
            height: menuButtonInfo.height + 'px',
            lineHeight: menuButtonInfo.height + 'px',
          }"
        >
          <image src="../../static/images/common/back.png" mode="aspectFill" />
        </view>
      </navigator>
      <view class="title-view">
        <view class="title">活动签到</view>
        <view class="btn">现场签到</view>
      </view>
    </view>
    <view class="card">
      <view class="info">
        <image
          src="https://img.js.design/assets/img/669399541caee4bc1e972e85.jpg#427a193654e771fe08be72b084e31daa"
          mode="aspectFill"
        />
        <view class="title">香港青年协会国际无伴奏合唱节....</view>
      </view>
      <view class="item">
        <view class="label">活动时间：</view>
        <view class="value">2024-07-24 18:30:00</view>
      </view>
      <view class="item">
        <view class="label">场次：</view>
        <view class="value">场次1</view>
      </view>
      <view class="item">
        <view class="label">地址：</view>
        <view class="value">陕西省西安市高新区高新万达1楼</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.sign-in {
  height: 100vh;
  background: #f5f5f5;
  .top {
    height: 706rpx;
    background: linear-gradient(180deg, #ea5506 0%, #f5f5f5 100%);
    .back-icon {
      padding-left: 34rpx;
      image {
        width: 18rpx;
        height: 36rpx;
      }
    }
    .title-view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40rpx;
      margin: 72rpx 0 30rpx;
      .title {
        font-size: 40rpx;
        font-weight: 700;
        color: #ffffff;
      }
      .btn {
        padding: 6rpx 12rpx;
        border-radius: 6rpx;
        background: #fcecdc;
        font-size: 24rpx;
        font-weight: 500;
        color: #ea5506;
      }
    }
  }
  .card {
    margin: -390rpx 24rpx 0;
    border-radius: 16rpx;
    background: #ffffff;
    padding: 36rpx;
    .info {
      display: flex;
      margin-bottom: 28rpx;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #dedede;
      image {
        border-radius: 12rpx;
        width: 124rpx;
        height: 124rpx;
        margin-right: 26rpx;
      }
      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
      }
    }
    .item {
      display: flex;
      margin-bottom: 20rpx;
      .label {
        width: 140rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
      }
      .value {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: nowrap;
}
</style>
